<template>
  <jke-modal
    :visible.sync="jkeForm.visible"
    :width="1200"
    :title="jkeForm.title"
    :fullscreen.sync="jkeForm.fullscreen"
    :switchFullscreen="jkeForm.switchFullscreen"
  >
    <div class="form-body">
      <a-form-model>
        <a-card :bordered="false" style="margin-top: 12px">
          <a-row :gutter="20">
            <a-col :span="8">
              <a-form-model-item label="反馈编号">{{ workOrderInfo.abnormalFeedbackCode || '--' }}</a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="创建人">{{ workOrderInfo.createBy || '--' }}</a-form-model-item>
            </a-col>
            <a-col :span="8">
              <div style="position: relative">
                <a-form-model-item label="创建时间">{{ workOrderInfo.createTime || '--' }}</a-form-model-item>

              </div>
            </a-col>
          </a-row>
        </a-card>
        <a-card title="反馈信息" :bordered="false" style="margin-top: 12px">
          <a-row :gutter="20">
            <a-col :span="24">
              <a-form-model-item label="异常事件">{{ workOrderInfo.eventName || '--' }}</a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="异常描述">{{ workOrderInfo.exceptionDescription || '--' }}</a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="生产工单">{{ workOrderInfo.orderCode || '--' }}</a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="工序">{{ workOrderInfo.processName || '--' }}</a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="设备">{{ workOrderInfo.deviceCode || '--' }} |
                {{ workOrderInfo.deviceName || '--' }}
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="物品">{{ workOrderInfo.goodsName || '--' }}</a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="规格">{{ workOrderInfo.spec || '--' }}</a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="单位">{{ workOrderInfo.basicUnit || '--' }}</a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card title="异常响应" :bordered="false" style="margin-top: 12px">
          <a-row :gutter="20">
            <a-col :span="8">
              <a-form-model-item label="响应时间">{{ workOrderInfo.responseTime || '--' }}</a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="响应人">{{ workOrderInfo.responder || '--' }}</a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card title="异常处理" :bordered="false" style="margin-top: 12px">
          <a-row :gutter="20">
            <a-col :span="12">
              <a-form-model-item label="处理时间">{{ workOrderInfo.processingTime || '--' }}</a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="处理人">{{ workOrderInfo.processor || '--' }}</a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="20">
            <a-col :span="12">
              <a-form-model-item label="异常原因">{{ workOrderInfo.reasonName || '--' }}</a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="处理描述">{{ workOrderInfo.processDescription || '--' }}</a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
      </a-form-model>
      <!-- <div class="footer-submit form-footer">
          <a-button v-if="!isEdit" @click="submitDraft" style="margin-right: 10px"> 拒绝 </a-button>
          <a-button type="primary" @click="submitProcess"> 同意 </a-button>
        </div> -->
    </div>
  </jke-modal>
</template>
<script>
import moment from 'moment'
import crumbs from '@/components/crumbs.vue'
import { numFormat } from '@/utils/util'
import { queryById } from '@/api/quality/manage'

import Examine from '@/components/examine'
import FlowStatus from '@/pubComponent/FlowStatus'

export default {
  components: {
    crumbs,
    Examine,
    FlowStatus
  },
  data() {
    return {
      jkeForm: {
        title: '申请详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true
      },
      workOrderInfo: {},
      isEdit: false
    }
  },
  watch: {
    'jkeForm.visible': function(val) {
      if (!val) {
        this.$emit('cancel')
      }
    }
  },
  mounted() {
    //进入检验化申请列表就打开弹窗bug
    // this.jkeForm.visible = true
  },
  methods: {
    initDetail(v) {
      this.jkeForm.title = v.title
      this.jkeForm.visible = true
      queryById(v).then((res) => {
        if (res.success) {
          if (res.result) {
            this.workOrderInfo = res.result
          }
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
    },
    submitProcess(e) {
      if (e && e.nodeDtos) {
        // 获取到数据后写表单提交的方法
        this.processDataVo = e
        this.handleSubmit(e)
      } else {
        // 调用子组件的方法获取数据
        this.$refs.examine.confirm()
      }
    },
    submitDraft() {
      // 拒绝
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';

/deep/ .ant-card-body {
  height: auto !important;
}

/deep/ .ant-form-vertical {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .ant-form-item {
    width: 30%;
  }
}

.form-body {
  height: calc(100vh - 120px);
  overflow-y: scroll;
}

.form-footer {
  position: fixed;
  bottom: 0;
}

.code-btn {
  position: absolute;
  right: 0;
  top: -34.5px;
}
</style>

